<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>lbw家乡map</title>
    <!--导入外部样式-->
	<link rel="stylesheet" href="../../css/zdmap.css" />
    <!--引用mapgis-client相关-->
    <script include="jquery" src="http://jlu3s.com:7037/mapgis-client/dist/include-lib-local.js" ></script>
    <script src="http://jlu3s.com:7037/mapgis-client/dist/include-openlayers-local.js" ></script>
</head>

<body><!-- onload="init();" -->
    <div id="mapCon" style="position: absolute;width: 100%; height:95%;">
        <!--图层控制面板-->
        <div id="layerControl" class="layerControl">
            <div class="title"><label>图层列表</label></div>
            <ul id="layerTree" class="layerTree"></ul>
        </div>
        <!--信息窗口-->
        <div id="popup" class="ol-popup">
          <a href="#" id="popup-closer" class="ol-popup-closer"></a>
          <div id="popup-content"></div>
        </div>
    </div>
    <!--坐标与比例尺-->
    <div class="coordinateAndScaleBar">
        <!--地图比例尺-->
        <div id="scaleBarDiv" class="map-scalebar">
            <div id="scaleBar"></div>
        </div>
        <!--地图坐标 (id必须为mouse-position，否则无法正常显示)-->
        <div class="map-decorate map-coordinate custom-mouse-position" id="mouse-position"></div>
    </div>

    <script type="text/javascript">
        //定义地图
        var map

        //region定义Map和View
        map = new ol.Map({
          target: 'mapCon',
          view: new ol.View({
            projection: 'EPSG:3857',
			center:[13400376.075873,4309787.184317],//根据底图显示而测出来的
            minZoom: 5, //例如：5，//可以缩小的最小级别;若为undefined表示无限制
            maxZoom: 18, //例如：19，//可以放大的最大级别；若为undefined表示无限制
            zoom: 12, //例如：6，//地图初始化时显示级别；注意：若此处未定义，地图初始化显示不出来
          })
        });
        //endregion

       const tdk = '4c27d6e0e8a90715b23a989d42272fd8';//天地图数据服务Key
       var myTdtImgLayer = new ol.layer.Tile({
              name: '天地图卫星影像',
              visible: true, //图层不可见
              title: "天地图卫星影像",
              source: new ol.source.XYZ({
                url: 'http://t' + Math.round(Math.random() * 7) + '.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=' + tdk,
                wrapX: false,
              })
       });
       map.addLayer(myTdtImgLayer)

		var myTdtCvaLayer = new ol.layer.Tile({
			name: '天地图注记',
			visible: true, //图层不可见
			title: "天地图注记",
			source: new ol.source.XYZ({
				url: 'http://t' + Math.round(Math.random() * 7) + '.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=' + tdk,
				wrapX: false,
			})
		});
		map.addLayer(myTdtCvaLayer)

		var myVecLayer1 = new Zondy.Map.GdbpLayer("", ["gdbp://MapGisLocal/JX/sfcls/LBW旅游景点"], {  //例如：'gdbp://MapGisLocal/sample/ds/地图综合/sfcls/水系'
            ip: "jlu3s.com",
            port: "7035",
            //projection: "EPSG:3857",//默认是4326的
			extent:[13389294.827373,4308142.166320,13401749.484724,4329347.071916], //LBW旅游景点 //extent这个很关键,否则出不来
            title: "LBW旅游景点", //官方Zondy.Map.GdbpLayer里是没有这个属性的
            visible: true, //官方Zondy.Map.GdbpLayer里是没有这个属性的
            style: new Zondy.Object.CDisplayStyle({
                AnnSizeFixed:true,//注记符号大小固定
                PntSizeFixed:true,//点状符号大小固定
                ShowCoordPnt:true,//显示坐标点
                //ShowElemRect:true,//显示元素的外包矩形
            })
          });
		map.addLayer(myVecLayer1)

		/*------属性查询---start---*/
		//创建查询结构对象
		var queryStruct = new Zondy.Service.QueryFeatureStruct();
		//是否包含几何图形信息
		queryStruct.IncludeGeometry = true;
		//是否包含属性信息
		queryStruct.IncludeAttribute = true;
		//是否包含图形显示参数
		queryStruct.IncludeWebGraphic = false;

		//指定查询规则
		var rule = new Zondy.Service.QueryFeatureRule({
			//是否将要素的可见性计算在内
			EnableDisplayCondition: false,
			//是否完全包含
			MustInside: false,
			//是否仅比较要素的外包矩形
			CompareRectOnly: false,
			//是否相交
			Intersect: true
		});
		//实例化查询参数对象
		var queryParam = new Zondy.Service.QueryByLayerParameter("gdbp://MapGisLocal/JX/sfcls/LBW旅游景点", {
			//几何对象
			//geometry: geomObj,
			//结果格式
			resultFormat: "json",
			//查询结构
			struct: queryStruct,
			where:"mpLayer=0", //条件查询的SQL语句,如果为空，则表示为单一的几何查询；如果取值，表示为几何和条件混合查询
			//查询规则
			//rule: rule,   //几何查询的规则
		});
		//设置查询分页号
		queryParam.pageIndex = 0;
		//设置查询要素数目
		queryParam.recordNumber = 20;
		//实例化地图文档查询服务对象
		var queryService = new Zondy.Service.QueryLayerFeature(queryParam, {
			//IP地址
			ip: "jlu3s.com",
			//端口号
			port: "7035"
		});
		//执行查询操作，querySuccess为成功回调，queryError为失败回调
		queryService.query(function (res) {
			console.log(res);

			var result = res;
			//初始化Zondy.Format.PolygonJSON类
			var format = new Zondy.Format.PolygonJSON();
			//将MapGIS要素JSON反序列化为ol.Feature类型数组
			var features = format.read(result);

			//实例化一个矢量图层drawLayerr用于高亮显示结果
			var drawSource = new ol.source.Vector({
				wrapX: false
			});
			drawSource.addFeatures(features);
			var drawLayer = new ol.layer.Vector({
				title:"属性查询结果",
				source: drawSource,
				style: new ol.style.Style({
					//填充色
					fill: new ol.style.Fill({
						color: 'rgba(255, 0, 0, 0.5)'
					}),
					//边线样式
					stroke: new ol.style.Stroke({
						color: 'rgba(255,204, 51, 1)',
						width: 1
					}),
					image: new ol.style.Icon({   //如果为'Point'类型的，则需要用这个image才能渲染出效果
						anchor: [0.55, 0.95], //基本准了
						src: './3.png'  //此处得用base64格式的图片源才能显示出来
					})
				})
			});
			map.addLayer(drawLayer);

			loadLayersControl(map, "layerTree"); //等这个图层加载完成后，再构建图层树

		}, function (error) {
			console.log(error);
		});
		/*------属性查询---end---*/

		/*------信息窗口---start---*/
        map.on("pointermove", mouseEventLinstener) //click,pointermove
        function mouseEventLinstener(e) {
            map.forEachFeatureAtPixel(e.pixel, function (feature,layer) {
                console.log(feature,layer,345)
                updateInfoView(feature);
            });
        }
		//（基于Zondy的popup)
		var container = null
		var content = null
		var closer = null

		 container = document.getElementById('popup')
		 content = document.getElementById('popup-content')
		 closer = document.getElementById('popup-closer')

		 var popup = null
		 /**
		 * 添加关闭按钮的单击事件（隐藏popup）
		 * @return {boolean} Don't follow the href.
		 */
		 closer.onclick = function() {
		 //未定义popup位置
		 popup.setPosition(undefined)
		 //失去焦点
			 closer.blur()
			 return false
		 }

		 if (popup == null) {
			 popup = new ol.Overlay(
				 /** @type {olx.OverlayOptions} */
				 ({
					 //要转换成overlay的HTML元素
					 element: container,
					 //当前窗口可见
					 autoPan: true,
					 //Popup放置的位置
					 positioning: 'bottom-center',
					 //是否应该停止事件传播到地图窗口
					 stopEvent: false,
					 autoPanAnimation: {
						 //当Popup超出地图边界时，为了Popup全部可见，地图移动的速度
						 duration: 250,
					},
				 })
			 )
		 }
		map.addOverlay(popup); //一定要加到地图上，否则不显示；后续操作不要随意that.map.getOverlays().clear()移除overlay图层，否则将导致信息窗口显示不出来

		//移除信息窗口
		function removePopup() {
			popup.setPosition(undefined);
			closer.blur();
		}
		//图层信息框内容更新
		function updateInfoView(feature) {
			if (!feature && popup) {
				removePopup();
				return;
			}
			if(feature){
				/*基于Zondy的写法*/
				//清空popup的内容容器
				content.innerHTML = '';
				 //在popup中加载当前要素的具体信息
				 //addFeatrueInfo(featuerInfo)
				 //content.appendChild(elementImg)
				 let html = getHtml(feature)
				 //console.log(html,19)
				 content.innerHTML = html;
				 //content = getHtml(feature);
				 //popup.setPosition(feature.getGeometry().getCoordinates())
				 popup.setPosition(getCenterPointFromExtent(feature.getGeometry().getExtent()))

                function getCenterPointFromExtent(extentArr){
                    let x = (extentArr[0] + extentArr[2])/2;
                    let y = (extentArr[1] + extentArr[3])/2;
                    return [x,y];
                }
			}
		} //end of updateInfoView()

		function getHtml(features) {
			//创建属性框
			let html = '';
			html += `<div class="iftp">`;
			html += `<table>`;
			html += `<tr><th style="min-width: 100px;">属性名称</th><th style="min-width: 200px;">属性值</th></tr>`;

			let f = features.values_;//与常规的相比，Zondy返回的feature多包了一层value_【相当于value_.value_后才能拿到字段的值】，所以此处多访问一层
			//console.log(f,20)

			//遍历各属性字段信息并放置到表格中
			for (const key in f.values_) {
				if (f.values_.hasOwnProperty(key)
					&& key != 'geometry'
					&& key != 'SmID'
					&& key != 'SmUserID'
					&& key != 'the_geom'
					&& key != 'PopupInfo'
					&& key != 'imgSrc'
					&& key != 'UserID'  //Zondy
					&& key != 'mpLayer'
					&& key != '照片地址' //排除照片地址的干扰
				) {
					const element = f.values_[key];
					if (element) {
						html += `<tr><td>${key}</td><td>${element}</td></tr>`;
					}
				}
			}

			//检测是否含有图片，若有则输出为html格式内容以便后续插入信息窗口中
			let picsDiv;
			//根据属性字段的值来获取相关图片地址
			let imgSrcStr = f.values_["照片地址"];
			if(imgSrcStr){
				console.log("→使用此方法：属性直接读取图片地址!!")
				let imgSrcArr = imgSrcStr.split('**');
				//console.log(imgSrcArr,12)
				picsDiv = buildPicDivForFeature(imgSrcArr);
			}
			//如果有图片则把图片罗列出来
			if(picsDiv){
				html += picsDiv;
			}
			html += `</table>`;
			html += `</div>`;
			return html;
		} //end of getHtml()

		//（方法）根据某要素图形所含的图片地址数组构建图片Div
		function buildPicDivForFeature(imgSrcArr){
			let picsDiv = "";
			imgSrcArr.forEach(item => {
				if(item){
					picsDiv += "<a href='" + item + "' target='_blank' style='display:inline-block;margin:10px;'><img src='" + item + "' width='120px;' height='90px;'></a>";
				}
			});
			picsDiv = "<tr>" +
				"<td  colspan='2'>" + picsDiv + "</td>" +
				"</tr>";
			return picsDiv;
		}
		/*------信息窗口---end---*/

		/*------图层面板---start---*/
		//加载图层列表数据
		//loadLayersControl(map, "layerTree");

		//map中的图层数组
		var layerArr = new Array();
		//图层名称数组
		var layerNameArr = new Array();
		//图层可见属性数组
		var layerVisibilityArr = new Array();

		/**
		 * 加载图层列表数据
		 * @param {ol.Map} map 地图对象
		 * @param {string} id 图层列表容器ID
		 */
		function loadLayersControl(map, id) {
			//图层目录容器
			var treeContent = document.getElementById(id);
			//获取地图中所有图层
			var layers = map.getLayers();
			for (var i = 0; i < layers.getLength() ; i++) {
				let t = layers.array_[i].get('title');
				let tv = layers.array_[i].getVisible();

				//新增li元素，用来承载图层项
				var elementLi = document.createElement('li');
				// 添加子节点
				treeContent.appendChild(elementLi);
				//创建复选框元素
				var elementInput = document.createElement('input');
				elementInput.type = "checkbox";
				elementInput.name = "layers";
				elementLi.appendChild(elementInput);
				//创建label元素
				var elementLable = document.createElement('label');
				elementLable.className = "layer";
				//设置图层名称
				setInnerText(elementLable, t);
				elementLi.appendChild(elementLable);
				//设置图层默认显示状态
				if (tv) {
					elementInput.checked = true;
				}
				//为checkbox添加变更事件
				addChangeEvent(elementInput, layers.array_[i]);
			}
		}
		/**
		 * 为checkbox元素绑定变更事件
		 * @param {input} element checkbox元素
		 * @param {ol.layer.Layer} layer 图层对象
		 */
		function addChangeEvent(element, layer) {
			element.onclick = function () {
				if (element.checked) {
					//显示图层
					layer.setVisible(true);
				}
				else {
					//不显示图层
					layer.setVisible(false);
				}
			};
		}
		/**
		 * 动态设置元素文本内容（兼容）
		 */
		function setInnerText(element, text) {
			if (typeof element.textContent == "string") {
				element.textContent = text;
			} else {
				element.innerText = text;
			}
		}
		/*------图层面板---end---*/

		/*------图层控件---start---*/
        /*集中调用*/
        addZoomControl();
        addZoomExtentControl();
        addMousePositionControl();
        addScaleControl();
        addEagleViewControl();

        //缩放控件
        function addZoomControl() {
            if (map != null) {
                var zoom = new ol.control.Zoom()
                map.addControl(zoom)
            }
        }
        //复位
        function addZoomExtentControl() {
            if (map != null) {
                var zoomToExtent = new ol.control.ZoomToExtent({
                    extent: [13389294.827373,4308142.166320,13401749.484724,4329347.071916],
                })
                map.addControl(zoomToExtent)
            }
        }
        //添加坐标
        function addMousePositionControl() {
            if (map != null) {
                var mousePositionControl = new ol.control.MousePosition({
                    //坐标格式
                    coordinateFormat: ol.coordinate.createStringXY(5),//坐标小数位数
                    //地图投影坐标系（若未设置则输出为默认投影坐标系下的坐标）
                    projection: 'EPSG:4326',
                    //坐标信息显示样式类名，默认是'ol-mouse-position'
                    className: 'custom-mouse-position',
                    //显示鼠标位置信息的目标容器
                    target: document.getElementById('mouse-position'),
                    //未定义坐标的标记
                    undefinedHTML: '&nbsp;',
                })
                map.addControl(mousePositionControl)
            }
        }
        //比例尺控件
        function addScaleControl() {
            if (map != null) {
                //实例化比例尺控件（ScaleLine）
                var scaleLineControl = new ol.control.ScaleLine({
                    //设置比例尺单位，degrees、imperial、us、nautical、metric（度量单位）
                    units: 'metric',
                    target: 'scaleBar',
                    className: 'ol-scale-line'
                })
                map.addControl(scaleLineControl)
            }
        }
        //鹰眼快视
        function addEagleViewControl() {
                const tdk = '4c27d6e0e8a90715b23a989d42272fd8';//天地图数据服务Key
                let TiandiMap_img,TiandiMap_imgcia;
                if (map != null) {
                    TiandiMap_img = new ol.layer.Tile({
                        name: '天地图影像图层',
                        visible: true, //图层不可见
                        source: new ol.source.XYZ({
                            url: 'http://t' + Math.round(Math.random() * 7) + '.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=' + tdk,
                            wrapX: false,
                        }),
                    })
                    TiandiMap_imgcia = new ol.layer.Tile({
                        name: '天地图影像注记图层',
                        visible: true, //图层不可见
                        source: new ol.source.XYZ({
                            url: 'http://t' + Math.round(Math.random() * 7) + '.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=' + tdk,
                            wrapX: false,
                        }),
                    })
                    //实例化鹰眼控件（OverviewMap）,自定义样式的鹰眼控件
                    var overviewMapControl = new ol.control.OverviewMap({
                        //鹰眼控件样式（see in overviewmap-custom.html to see the custom CSS used）
                        className: 'ol-overviewmap ol-custom-overviewmap',
                        //鹰眼中加载同坐标系下不同数据源的图层
                        layers: [TiandiMap_img, TiandiMap_imgcia],
                        //鹰眼控件展开时功能按钮上的标识（网页的JS的字符编码）
                        collapseLabel: '\u00BB',
                        //鹰眼控件折叠时功能按钮上的标识（网页的JS的字符编码）
                        label: '\u00AB',
                        //初始为展开显示方式
                        collapsed: true, //true为默认折叠
                        view: new ol.View({ //20210929此处自定义增加了view的设置
                            projection: 'EPSG:3857',
                            multiWorld: true
                        }),
                    })
                    map.addControl(overviewMapControl)
                }
            }
        /*------图层控件---end---*/

    </script>

</body>

</html>